import React from 'react'
import { NavBar } from 'antd-mobile'
// 导入样式
import './index.scss'
import axios from 'axios'

// 城市列表数据格式化
const formatCityData = (list) => {
  const cityList = {}
  let cityIndex = []
  // 1 遍历 list 数组
  list.forEach((item) => {
    // 2 获取每一个城市的首字母
    const first = item.short.substr(0, 1)
    // 3 判断 cityList 中是否有改分类
    if (cityList[first]) {
      // 4 如果有，直接往该分类中 push 数据，如果没有，创建添加进去
      cityList[first].push(item)
    } else {
      cityList[first] = [item]
    }
  })
  cityIndex = Object.keys(cityList).sort()
  return {
    cityList,
    cityIndex,
  }
}

export default class CityList extends React.Component {
  state = {
    CityList: [], //城市列表数据
  }
  async getCityListData() {
    // 获取城市列表数据
    const res = await axios.get('http://localhost:8080/area/city', {
      params: { level: 1 },
    })
    // console.log(res)
    // 接口返回的数据格式：
    // 渲染城市列表的数据格式为： {a:[{},{}],b:[{},...]}
    // 渲染右侧索引的数据格式：['a','b']
    const { cityList, cityIndex } = formatCityData(res.data.body)

    // 获取热门城市数据
    const hotRes = await axios.get('http://localhost:8080/area/hot')
    console.log(hotRes)
    cityList['hot'] = hotRes.data.body
    cityIndex.unshift('hot')
    // 获取当前城市数据

    console.log(cityList, cityIndex)
    // this.setState({
    //   CityList: res.data.body,
    // })
  }
  componentDidMount() {
    this.getCityListData()
  }
  render() {
    return (
      <div className="cityList">
        <NavBar
          className="navbar"
          mode="light"
          icon={<i className="iconfont icon-houtui1" />}
          onLeftClick={() => this.props.history.go(-1)}
        >
          城市选择
        </NavBar>
      </div>
    )
  }
}
